<template>
  <div class="albumsMenu">
    <div class="tab_title">
      <span @click="showMenu">取消</span>
      类型选择
    </div>
    <div class="tab-row">
      <span class="tab-item active title" @click="showAll">
        全部音单
      </span>
    </div>
    <RowItem 
      v-for="(item,key) of list"
      :key="key"
      :item="item"
      :title="key"
      @showMenu="showMenu"
      :activeId="aId"
    ></RowItem>
  </div>
</template>

<script>
import bus from "assets/playerBus"
import RowItem from "components/home/albums/RowItem"
import { get } from "util/http"
export default {
  data(){
    return{
      list:{},
      aId:this.$route.params.id
    }
  },
  methods:{
    showMenu(){
      this.$emit("showMenu")
    },
    showAll(){
      this.aId=0
      this.$emit("changeType",{id:this.aId})
      this.showMenu()
      this.$router.push(`/albums/${this.aId}`)
    }
  },
  async mounted(){
    let result=await get({
      url:"/ajax/malbum/recommand"
    })
    this.list=result.info
    bus.$on('changeActive',(payload)=>{
      this.aId=payload.id
      this.$emit("changeType",{id:this.aId})
    })
  },
  components:{
    RowItem
  }
}
</script>

<style lang="stylus" scoped>
  .albumsMenu
    width 100%
    height 100%
    position absolute
    top 0
    background #f5f5f5
    .tab_title
      height .4rem
      background #fff
      line-height .4rem
      border-bottom 1px solid #eeeeee
      text-align center
      font-size .16rem
      color #262626
      >span 
        color #9e9e9e
        position absolute
        left .1rem
    .tab-row
      position relative
      margin 0 0 .1rem
      background-color #fff
      color #3d3d3d
      font-size .14rem
      overflow hidden
      display flex
      justify-content center
      align-items center
      .item-list
        display flex
        flex-wrap wrap
        flex 1
      .tab-item
        display flex
        justify-content center
        align-items center
        margin .06rem auto
        width calc((100% - 1rem) / 2)
        height .46rem
        border 1px solid #e1e1e1
        &.active
          border-color #3d3d3d
          font-weight 700
        &.title
          width calc(100% - 0.2rem)
</style>